<%@ page language="java" contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" isELIgnored="false" %>
<%@include file="/WEB-INF/common/common.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>资料管理系统</title>
</head>
<script type="text/javascript">
    function reload() {
        $('#image').attr("src", "${ctx}/verification?date=" + new Date().getTime());
        $("#checkCode").val("");   // 将验证码清空
    }
    $(function () {
        $('#checkCode').change(function () {
            var text = $.trim($("#checkCode").val());
            $.get("${ctx}/verificationCode?code=" + text, function (data) {
                if (data.success) {
                    $("#span").html("验证成功！".fontcolor("green"));
                } else {
                    $("#span").html("验证失败！".fontcolor("red"));
                    reload();  //验证失败后需要更换验证码
                }
            });
        });
    });
</script>
<body>
<div class="container">
    <div class="col-xs-4"></div>
    <div class="col-xs-4">
        <form action="${ctx}/login" method="post" id="form1">
            <br><br>
            <p class="h3 text-center">欢迎登录</p>
            <font color="red">${param.msg}${msg}</font>
            <div class="form-group">
                <label>用户名：</label>
                <input type="text" class="form-control" name="userName" id="username"> <span
                    id="username1"> </span>
            </div>
            <div class="form-group">
                <label> 密码：</label>
                <input type="password" class="form-control" name="passWord" id="password">
                <span id="password1"></span>
            </div>
            <p>
                <label for="verification">验证码：</label>
            <div class="col-md-4">
                <input name="checkCode" id="checkCode" type="text" class="form-control" id="verification"
                       autocomplete="off"/>
            </div>
            <a href="javascript:reload()"><img src="${ctx}/verification" alt="验证码" id="image"/>看不清？</a>
            <span id="span" style="font-size: 15px;font-weight: bold"></span>
            </p>
            <br>
            <div class="form-group">
                <input type="submit" class="btn btn-primary col-sm-4" value="登录">
                <a class="col-sm-4 col-sm-offset-4 btn btn-link" href="${ctx}/register" >还没注册？</a>
            </div>
        </form>
    </div>
    <div class="col-xs-4"></div>
</div>
</body>
</html>
